import { Tree, Menu } from 'antd';
import { useState } from 'react';
import {
  FileOutlined
} from '@ant-design/icons'
import { v4 as uuidv4 } from 'uuid';

export const ProjectTree = ({nodeClick}) => {
  const treeData = [
    {
      title: 'XXX测试',
      key: '001',
      icon: <FileOutlined />,
      children: [
        { key: '1', type: 'dataConfig', name: '激励', title: '激励信号配置', template: '激励代号', templates: [ 
          { key: uuidv4(), templateName: '硬件1', list: [] }, 
          { key: uuidv4(), templateName: '硬件2', list: [] }, 
          { key: uuidv4(), templateName: '硬件3', list: [] }, 
        ]},
        { key: '2', type: 'dataConfig', name: '总线', title: '总线配置', template: '模版名', templates: [
          { key: uuidv4(), templateName: '总线1', list: [] }, 
          { key: uuidv4(), templateName: '总线2', list: [] }, 
          { key: uuidv4(), templateName: '总线3', list: [] }, 
        ] },
        { key: '3', type: 'dataConfig', name: '协议', title: '协议配置', template: '模版名', templates: [
          { key: uuidv4(), templateName: '协议1', list: [] }, 
          { key: uuidv4(), templateName: '协议2', list: [] }, 
          { key: uuidv4(), templateName: '协议3', list: [] }, 
        ] },
        { key: '4', type: 'dataConfig', name: '判读规则', title: '自动判读配置', template: '判读名', templates: [
          { key: uuidv4(), templateName: '观察者1', list: [] }, 
          { key: uuidv4(), templateName: '观察者2', list: [] }, 
          { key: uuidv4(), templateName: '观察者3', list: [] }, 
        ] },
        {
          title: 'XXX流程',
          key: '10',
          type: 'project',
          children: [
            {
              title: '程序配置',
              key: 'flowConfig',
              type: 'flowConfig'
            }
          ]
        },
      ]
    },
    
  ]
  
  const onSelect = (keys) => {
    let nodeData = treeData[0].children.find(item => item.key === keys[0])
    if (keys[0] == 'flowConfig') {
      nodeData = {
        title: '程序配置',
        key: 'flowConfig',
        type: 'flowConfig'
      }
    }
    nodeClick && nodeClick(nodeData)
  }

  const [contextStyle, setContextStyle] = useState(null)
  const [menuItems, setMenuItems] = useState([
    { label: '删除流程', key: 'item-1' },
  ])

  const onRightClick = ({event, node}) => {
    console.log(event, node)
    event.preventDefault();
    if (node.type == 'project') {
      setContextStyle({
        top: event.clientY,
        left: event.clientX,
      })
    }
  }

  return <>
    <Tree showIcon={true} treeData={treeData} defaultExpandAll onSelect={onSelect} onRightClick={onRightClick}/>
    {
        contextStyle && <div className='context-menu' style={contextStyle}>
        <Menu items={menuItems} onClick={() => setContextStyle(null)} />
      </div>
    }
  </>
}

export default ProjectTree